<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>房间入住</title>
    <script type="text/javascript" src="../../script/aes.js"></script>
	<script type="text/javascript" charset="UTF-8" src="../../script/naes.js"></script>
	<script type="text/javascript" src="../../script/modeecb.js"></script>
    <script type="text/javascript" src="../../script/tmd5.js"></script>
    <script type="text/javascript" src="../../script/constants.js"></script>
    <script type="text/javascript" src="../../resource/jquery214.js"></script>
    <script type="text/javascript" src="../../script/api.js"></script>
    <style>
    	body{
    	    margin: 0;	
    	    background:url(../../image/bj.png) repeat-x 0;
    	    background-size: 100%;
    	}
    	.title{
    	    height: 45px;
    	    background: #0483d3;
    	    line-height: 45px;
    	    font-size: 20px;
    	    margin-bottom: 20px;
    	}
    	
    	.input{
	    	float:left;
	    	height: 30px;
	    	padding: 5px;
	    	font-size: 16px;
	    	border:0;
	    	outline:none;
	    	border-radius: 5px;
    	}
    	.text{
	    	float: left;
	    	height: 30px;
	    	line-height: 30px;
	    	font-size: 18px;
	    	color: #666666;
	    	text-align: center;
    	}
    	.ftext{
	    	float: left;
	    	height: 30px;
	    	line-height: 30px;
	    	font-size: 18px;
	    	color: #666666;
	    	text-align: left;
    	}
    </style>
</head>
<body>
<header id="statusBar">
  <div class="title">
    <div style="float: left;width: 30px;height: 30px;padding: 7.5px;" onclick="api.closeWin();">
    <img src="../../image/hotelManage/back.png"  style="width: 100%;"/>
    </div>
    <div style="float: left;color: #ffffff;">
    房间预订
    </div>
    <div style="float: right;color: #32CD32;margin-right: 20px;" onclick="submit();">
    完成
    </div>
  </div>
  </header>
  <div>
  <input type="text" class="input" style="width: 60%;display: none;" id="room_id" readonly="true" />
   <div style="margin-left: 5px;">
    <div style="width: 18%;" class="text">房号：</div>
    <div style="width: 18%;" class="ftext" id="room_num">1023</div>
    <div style="width: 18%;" class="text">房费：</div>
    <div style="width: 27%;" class="ftext" id="room_price">1111元/天</div>
   </div>
   <div style="height: 10px;clear: both;"></div>
   
   <div style="">
    <div style="width: 30%;" class="text">旅客姓名：</div>
    <input type="text" class="input" style="width: 60%" placeholder="请输入旅客姓名" id="name" />
   </div>
   <div style="height: 10px;clear: both;"></div>
   
   <div style="">
    <div style="width: 30%;" class="text">证件类型：</div>
    <input type="text" class="input" value="身份证" style="width: 60%" placeholder="请选择证件类型" id="credtext" readonly="true" onclick="selectCred();"/>
    <input type="text" style="display: none"  id="credcata"/>
   </div>
   <div style="height: 10px;clear: both;"></div>
   
   <div style="">
    <div style="width: 30%;" class="text">证件号码：</div>
    <input type="text" class="input" style="width: 60%" placeholder="请输入证件号码" id="crednum" />
    <div style="height: 10px;clear: both;"></div>
   </div>
   
   <div style="">
    <div style="width: 30%;" class="text">缴纳押金：</div>
    <input type="text" class="input" style="width: 60%" placeholder="请输入押金金额" id="cash" />
    <div style="height: 10px;clear: both;"></div>
   </div>
   
   <div style="">
    <div style="width: 30%;" class="text">房费调整：</div>
    <select style="width: 20%;float:left;height: 40px;padding: 5px;font-size: 16px;border:0;outline:none;border-radius: 5px;margin-right:5%;" id="adjust" >
      <option value ="0" selected>优惠</option>
      <option value ="1">增加</option>
    </select>
    <input class="input" style="width: 30%" placeholder="请输入调整金额" id="price"/>
    <div style="height: 10px;clear: both;"></div>
   </div>
   
   <div style="">
    <div style="width: 30%;" class="text">入住时间：</div>
    <input type="text" class="input" style="width: 60%" placeholder="请选择入住时间" id="arrival" readonly="true" onclick="selecttime()"/>
    <div style="height: 10px;clear: both;"></div>
   </div>
   
   <div style="">
    <div style="width: 30%;" class="text">证件采集：</div>
    <div style="float: left;width: 63%;height: 200px;line-height: 200px;background: #8d8d8d;text-align: center;">
    <button style="width: 35%;height: 50px;" onclick="credCollection();" id="carema">拍照</button>
    <img src="" id="photo" style="float: left;width: 100%;height: 100%;display: none;"/>
    <input type="text" id="imgpath" style="display: none"/>
    </div>
    <div style="height: 10px;clear: both;"></div>
   </div>
  </div>      
</body>
<script type="text/javascript">
    var sum = "";
    var room = "";
	apiready = function(){
	
	    if(api.systemType == "ios"){
		   document.getElementById("statusBar").style.background = "#298cb4";
		}
	    $api.fixStatusBar( $api.dom('header') );
	    
	    room = api.pageParam.room;
	    var id = api.pageParam.id;
	    var name = api.pageParam.name;
	    sum = api.pageParam.price;
	    $("#room_price").html(sum+"元/天");
	    $("#room_num").html(room);
	    $("#room_id").val(id);
	    $("#name").val(name);
	    $("#price").val(0);
		$("#arrival").val(getNowFormatDate());
	    $("#credcata").val("11");
	};
	
	function credCollection(){
	    var baiduTextReader = api.require('baiduTextReader');
			baiduTextReader.requestToken({
			}, function(ret, err) {
			console.log(JSON.stringify(ret));
			console.log(JSON.stringify(err));
			    if (ret) {
			      api.getPicture({
			        sourceType: 'camera',
			        encodingType: 'jpg',
			        mediaValue: 'pic',
			        destinationType: 'base64',
			        allowEdit: true,
			        quality: 50,
			        targetWidth:2000,
			        saveToPhotoAlbum: true
			      }, function(ret, err) {
			          if (ret)
			            {
			              console.log(JSON.stringify(ret));
			              if(ret.data &&  ret.data != '')
			              {
				              document.getElementById('carema').style.display = "none";
				              document.getElementById('photo').style.display = "";
				              document.getElementById('photo').src = ret.base64Data;
			                  var imgPath = ret.data;
			                  $("#imgpath").val(ret.base64Data);
			                  var baiduTextReader = api.require('baiduTextReader');
			                  baiduTextReader.recGeneralBasic({
			                      image:imgPath 
			                  }, function(ret, err) {
			                      if (ret) {
			                          //console.log(JSON.stringify(ret));
			                          $("#name").val(ret.words_result[0].words.substring(2,ret.words_result[0].words.length));
			                          $("#crednum").val(ret.words_result[ret.words_result.length-1].words.substring(6,ret.words_result[ret.words_result.length-1].words.length));
			                      } else {
			                          alert(JSON.stringify(err));
			                      }
			                  });
			              }   
			          } else {
			              alert(JSON.stringify(err));
			          }
			      });
			    } else {
			        alert(JSON.stringify(err));
			    }
		});
	}
    
    //提交数据
    function submit(){
       var link = "http://www.scscpt.com:9080/JDSJD_CS_Server/BookRoomServlet";
       var roomid = $("#room_id").val();
       var credcata = $("#credcata").val();
       var crednum = $("#crednum").val();
       var name = $("#name").val();
       var arrival = $("#arrival").val();
       var cash = $("#cash").val();
       var price = $("#price").val();
       var adjust = $("#adjust").val();
       var hotelId = $api.getStorage("hotelId");
       if(check(roomid,name,crednum,cash)){
            var UILoading = api.require('UILoading');
		    UILoading.flower({
			    center: {
			        x: api.winWidth/2.0,          
			        y: api.winHeight/2.0 
			    },
			    size: 30,
			    mask: "rgba(0,0,0,0.5)",
			    fixed: true
		    }, function(ret) {
			    uiId = ret.id;
		    });
            var content = {"isupload":0,"enterprisenum":hotelId,"room":room,"roomid":roomid,"pledge":cash,"name":name,"cardtype":credcata,"ruzhushijian":arrival,"idnum":crednum,"cash":sum,"discount":price,"img":$("#imgpath").val(),"adjust":adjust,"tuifangshijian":""};
	        var callback = function(ret, err){
		        //console.log(JSON.stringify(ret));
		        UILoading.closeFlower({
				    id: uiId
				});
		        if(ret.success == true || ret.success == "true"){
		           //刷新首页
                   api.sendEvent({
					    name: 'checkin'
				   });
				   api.ajax({
				        url: link,
				        method: 'post',
				        data: { 
					            values: content
					        },
					    dataType: 'text'
			       },function(ret,err){
			            if(ret != "1"){//上传失败本地保存
				             var cusInfo = $api.getStorage("cusInfo");
						     cusInfo.push(content);
						     $api.setStorage("cusInfo",cusInfo);
						     api.sendEvent({
							    name: 'dataSubmit'
						     });
				        }
				        api.alert({msg:"办理成功"});
				        api.closeWin();
			       });
		        }else{
		           api.alert({msg:"办理失败，"+ret.msg});
		        }
		    }
		    apiAjax(JSON.stringify(content),url.checkin,callback);
	   }
    }
    
    function selecttime(){
        var date = getNowFormatDate();
        api.openPicker({
		    type: 'date_time',
		    date: date,
		    title: '选择时间'
		}, function(ret, err) {
		    if (ret) {
		        alert(JSON.stringify(ret));
		    } else {
		        alert(JSON.stringify(err));
		    }
		});
    }
    
    //检查提交数据
    function check(roomid,name,crednum,cash){
        var flag = true;
        if(roomid == "" || roomid == null || roomid == "undefined"){
          api.alert({msg: "请选择入住房间"});
	      flag = false;
        }
        if(name == "" || name == null || name == "undefined"){
          api.alert({msg: "请输入正确的旅客姓名"});
	      flag = false;
        }
        if(crednum == "" || crednum == null || crednum == "undefined"){
          api.alert({msg: "请输入正确的证件号码"});
	      flag = false;
        }
        if(cash == "" || cash == null || cash == "undefined"){
          api.alert({msg: "请输入正确的押金金额"});
	      flag = false;
        }
        return flag;
    }
    
    //判断日期
    function isDate(dateString){
	  if(dateString.trim()=="")return true;
	  var r=dateString.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); 
	  if(r==null){
	   return false;
	  }
	  var d=new Date(r[1],r[3]-1,r[4]);  
	  var num = (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
	  if(num==0){
	   alert("请输入格式正确的日期\n\r日期格式：yyyy-mm-dd\n\r例  如：2008-08-08\n\r");
	  }
	  return (num!=0);
    } 
    
    
    //选择房间
    function selectCred(){
       var UIMultiSelector = api.require('UIMultiSelector');
		 UIMultiSelector.open({
		     rect: {
		         h: 295
		     },
		     text: {
		         title: '证件类型',
		         leftBtn: '取消',
		         rightBtn: '确认',
		         selectAll: 'ALL'
		     },
		     max: 0,
		     singleSelection: true,
		     styles: {
		         bg: '#fff',      
		         mask: 'rgba(0,0,0,0.5)',
		         title: {
		             bg: '#fff',
		             color: '#27a8fa',
		             size: 16,
		             h: 44
		         },
		         leftButton: {
		             bg: '#fff',    
		             w: 80,
		             h: 35,
		             marginT: 5,
		             marginL: 8,
		             color: '#FF6347',
		             size: 14
		         },
		         rightButton: {
		             bg: '#fff',    
		             w: 80,
		             h: 35,
		             marginT: 5,
		             marginR: 8,
		             color: '#32CD32',
		             size: 14
		         },
		         item: {
		             h: 50,
		             bg: '#FAFAFA',
		             bgActive: '#27a8fa',
		             bgHighlight: '#27a8fa',
		             color: '#8d8d8d',
		             active: '#fff',
		             highlight: '#fff',
		             size: 16,
		             lineColor: '#EBEBEB',
		             textAlign: 'center'
		         },
			     icon: {                            //（可选项）JSON 类型；每个选项的状态图标样式，若不传则不显示选中的状态图标
			        w: 0,                         //（可选项）数字类型；图标的高度；默认：20
			        h: 0,                         //（可选项）数字类型；图标的高度；默认：w
			        marginT: 11,                   //（可选项）数字类型；图标的上边距；默认：(item.h - h) / 2
			        marginH: 8,                    //（可选项）数字类型；图标的横向边距，与 align 的对齐方向相关；默认：8
			        bg: '#fff',                    //（可选项）字符串类型；图标未选中时的背景，支持 rgb、rgba、#、img；默认：rgba(0,0,0,0)
			        bgActive: '#fff',              //（可选项）字符串类型；已选中图标的背景，支持 rgb、rgba、#、img；默认：bg
			        bgHighlight: '#fff',           //（可选项）字符串类型；选项的高亮背景，支持 rgb、rgba、#、img；默认：bg
			        align: 'left'                  //（可选项）字符串类型；图标相对与选项的对齐方式：'left|right'；默认：left
			     }
		     },
		     animation: true,
		     items:  [{
		                 id: 11,
				         text: '身份证',
				         status: 'selected'
				     }, {
				         id: 13,
				         text: '户口簿',
				         status: 'normal'
				     }, {
				         id: 90,
				         text: '军官证',
				         status: 'normal'
				     }, {
				         id: 92,
				         text: '士兵证',
				         status: 'normal'
				     }, {
				         id: 99,
				         text: '其他',
				         status: 'normal'
				     }]
		 }, function(ret, err) {
		     if (ret) {
		         if(ret.eventType == "clickLeft"){
		            UIMultiSelector.hide();
		         }else if(ret.eventType == "clickRight"){
		             var cred = ret.items[0].id;
		             $("#credcata").val(cred);
		             $("#credtext").val(ret.items[0].text);
		            UIMultiSelector.hide();
		         }
		     } else {
		         alert(JSON.stringify(err));
		     }
		 });
    }
    
    function getNowFormatDate() {
	    var date = new Date();
	    var seperator1 = "-";
	    var seperator2 = ":";
	    var month = date.getMonth() + 1;
	    var strDate = date.getDate();
	    var minu = date.getMinutes();
	    if (month >= 1 && month <= 9) {
	        month = "0" + month;
	    }
	    if (strDate >= 0 && strDate <= 9) {
	        strDate = "0" + strDate;
	    }
	    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
	            + " " + date.getHours() + seperator2 + date.getMinutes()
	            + seperator2 + date.getSeconds();
	    return currentdate;
	} 
</script>
</html>